extends ../_layout

block active
  - sidebar_active = 'grid-masonry.html'

block content
  h3 Grid Masonry
    small Pure CSS and mobile first with a fallback to inline grid.

  .row-masonry.row-masonry-xl-6.row-masonry-lg-4.row-masonry-md-3.row-masonry-sm-2
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula.
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Aenean scelerisque suscipit arcu a consectetur. 
    .col-masonry
      .box-placeholder.m0
        p.text-center.text-muted: strong Masonry Item
        p Integer tincidunt nisi id libero tristique aliquet. Pellentesque a commodo est. Proin ut mi augue, non laoreet ligula. Vestibulum ante ipsum primis in faucibus orci et ultrices posuere cubilia Curae; Class taciti conubia nostra, per himenaeos. 

  h4.page-header Masonry with any kind of element
  .row-masonry.row-masonry-md-4.row-masonry-sm-2
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg1.jpg",alt="")
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg4.jpg",alt="")
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg2.jpg",alt="")
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg5.jpg",alt="")
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg6.jpg",alt="")
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg7.jpg",alt="")
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg8.jpg",alt="")
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg9.jpg",alt="")
    .col-masonry
      img.img-thumbnail.img-responsive(src="img/bg10.jpg",alt="")

  p Supported from IE10. 
    a(href="http://caniuse.com/#feat=multicolumn") Can I Use.